<template>
	<view class="search-container">
		<!-- 搜索框 -->
		<view class="search-input-container">
			<input type="text" placeholder="搜索产品" v-model="searchKeyword" @input="onSearchInput"
				@confirm="performSearch" class="search-input" :focus="true" />
		</view>

		<!-- 最近搜索 -->
		<view class="recent-searches" v-if="recentSearches.length > 0">
			<view class="section-header">
				<view class="section-title">最近的搜索</view>
				<view class="clear-btn" @tap="clearRecentSearches">清除</view>
			</view>
			<view class="search-tags">
				<view class="search-tag" v-for="(item, index) in recentSearches" :key="index" @tap="searchByTag(item)">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="popular-searches">
			<view class="section-title">热门搜索</view>
			<view class="product-grid">
				<view class="product-item" v-for="(product, index) in popularProducts" :key="index"
					@tap="goToProduct(product)">
					<img :src="product.image | avatarUrlFind('1')" :alt="product.name" />
					<view class="product-info">
						<view class="product-title">{{ product.drugName }}</view>
						<view class="product-specs">{{ product.productInfo }}</view>
						<view class="price-sales-row">
							<view class="product-price" v-if="product.goodsCategory==='P'">¥{{ product.salesPrice }}
							</view>
							<view class="product-price" v-if="product.goodsCategory==='TC'">¥{{ product.packagePrice }}
							</view>
							<view class="product-sales">已售{{ product.salesNum }}+</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		queryGoodsList
	} from '@/api/shop.js'
	export default {
		data() {
			return {

				queryParams: {},
				searchKeyword: '',
				recentSearches: [],
				popularProducts: [

				],
			}
		},
		onLoad() {
			// 页面加载时从本地存储读取最近搜索
			this.loadRecentSearches()
			this.queryGoodsList()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			onSearchInput(e) {
				this.searchKeyword = e.detail.value
				// 这里可以添加搜索建议逻辑
			},
			performSearch() {
				if (this.searchKeyword.trim()) {
					// 添加到最近搜索
					this.addToRecentSearches(this.searchKeyword)
					// 将搜索关键词存储到全局数据中
					getApp().globalData.searchValue = this.searchKeyword
				} else {
					// 如果搜索值为空，清空全局搜索值
					getApp().globalData.searchValue = ''
				}
				// 跳转到商城页面
				uni.switchTab({
					url: '/pages/shop/index'
				})
			},
			searchByTag(tag) {
				this.searchKeyword = tag
				// 将搜索关键词存储到全局数据中
				getApp().globalData.searchValue = tag
				// 跳转到商城页面
				uni.switchTab({
					url: '/pages/shop/index'
				})
			},
			addToRecentSearches(keyword) {
				// 移除重复项
				const index = this.recentSearches.indexOf(keyword)
				if (index > -1) {
					this.recentSearches.splice(index, 1)
				}
				// 添加到开头
				this.recentSearches.unshift(keyword)
				// 限制最多保存10个
				if (this.recentSearches.length > 10) {
					this.recentSearches = this.recentSearches.slice(0, 10)
				}
				// 保存到本地存储
				this.saveRecentSearches()
			},
			loadRecentSearches() {
				// 从本地存储读取最近搜索
				try {
					const saved = uni.getStorageSync('recentSearches')
					if (saved) {
						this.recentSearches = JSON.parse(saved)
					}
				} catch (e) {
					console.error('读取最近搜索失败:', e)
				}
			},
			saveRecentSearches() {
				// 保存最近搜索到本地存储
				try {
					uni.setStorageSync('recentSearches', JSON.stringify(this.recentSearches))
				} catch (e) {
					console.error('保存最近搜索失败:', e)
				}
			},
			clearRecentSearches() {
				// 清除最近搜索
				uni.showModal({
					title: '提示',
					content: '确定要清除所有搜索记录吗？',
					success: (res) => {
						if (res.confirm) {
							this.recentSearches = []
							this.saveRecentSearches()
						}
					}
				})
			},
			goToProduct(product) {
				uni.navigateTo({
					url: `/subPackage_1/pages/goods/good-detail?id=${product.id}`
				})
			},
			async queryGoodsList() {
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 4
				this.queryParams.isShow = '1'
				this.queryParams.isRecommend = '3'
				this.queryParams.shopFlag = 'normal'
				const {
					rows,
					total
				} = await queryGoodsList(this.queryParams)
				this.popularProducts = rows
				this.$forceUpdate()
			}
		}
	}
</script>

<style scoped>
	.search-container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.status-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 30rpx;
		background-color: #000;
		color: #fff;
		font-size: 28rpx;
	}

	.status-icons {
		display: flex;
		gap: 10rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.nav-left,
	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.back-icon,
	.more-icon,
	.target-icon {
		font-size: 32rpx;
		color: #333;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.search-input-container {
		padding: 30rpx;
		background-color: #fff;
	}

	.search-input {
		width: 100%;
		height: 80rpx;
		background-color: #f1f1f1;
		border-radius: 40rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		border: none;
		outline: none;
	}

	.search-input::placeholder {
		color: #999;
	}

	.recent-searches,
	.popular-searches,
	.search-results {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.clear-btn {
		font-size: 26rpx;
		color: #999;
		padding: 10rpx 20rpx;
	}

	.search-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.search-tag {
		padding: 10rpx 20rpx;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #666;
	}

	.product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.product-item {
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
	}

	.product-item img {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.product-info {
		padding: 10px;
	}

	.product-title {
		font-size: 14px;
		margin-bottom: 5px;
		color: #333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-specs {
		font-size: 12px;
		color: #999;
		margin-bottom: 8px;
	}

	.price-sales-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		font-size: 16px;
		color: #ff6b35;
		font-weight: bold;
	}

	.product-sales {
		font-size: 12px;
		color: #999;
	}
</style>